<template>
  <div>
    <div class="item">
      <div class="header">
        <span>描述</span>
      </div>
      <div class="content">
        <a-input  v-model:value="props.nodeData.properties.remarks" :rows="3" placeholder="请输入描述" style="width: 100%"   @change="setProperties()"/>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输入变量</span>
      </div>
      <div class="content">
        <div class="field">
          <a-select style="width: 100%" placeholder="请选择输入字段" v-model:value="inputParamId" @change="handleFieldChange">
            <a-select-option v-for="preItem in prevVariables" :key="preItem.id" :value="preItem.id">
              {{ preItem.nodeName }}/{{ preItem.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>模型</span>
      </div>
      <div class="content">
        <div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
          <a-select style="width: 100%" v-model:value="model.modeId" placeholder="请选择模型" @change="handleModelChange">
            <a-select-option v-for="item in modelList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-popover placement="topLeft" :overlayStyle="{ width: '360px' }">
            <template #content>
              <a-form ref="userFormRef" :model="model" :rules="rules" class="user-form">
                <a-form-item label="模型温度" name="name">
                  <a-row>
                    <a-col :span="18">
                      <a-slider v-model:value="model.params.temperature" :step="0.1" :min="0" :max="1" />
                    </a-col>
                    <a-col :span="4">
                      <a-input-number v-model:value="model.params.temperature" :min="0" :max="1" />
                    </a-col>
                  </a-row>
                </a-form-item>
                <a-form-item label="词汇属性" name="modelType">
                  <a-row>
                    <a-col :span="18">
                      <a-slider v-model:value="model.params.topP" :step="0.1" :min="0" :max="1" />
                    </a-col>
                    <a-col :span="4">
                      <a-input-number v-model:value="model.params.topP" :min="0" :max="1" />
                    </a-col>
                  </a-row>
                </a-form-item>
                <a-form-item label="话题熟悉" name="modelName">
                  <a-row>
                    <a-col :span="18">
                      <a-slider v-model:value="model.params.presencePenalty" :step="0.1" :min="0" :max="1" />
                    </a-col>
                    <a-col :span="4">
                      <a-input-number v-model:value="model.params.presencePenalty" :min="0" :max="1" />
                    </a-col>
                  </a-row>
                </a-form-item>
                <a-form-item label="重复属性" name="baseUrl">
                  <a-row>
                    <a-col :span="18">
                      <a-slider v-model:value="model.params.frequencyPenalty" :step="0.1" :min="0" :max="1" />
                    </a-col>
                    <a-col :span="4">
                      <a-input-number v-model:value="model.params.frequencyPenalty" :min="0" :max="1" />
                    </a-col>
                  </a-row>
                </a-form-item>
                <a-form-item label="最大回复" name="baseUrl">
                  <a-row>
                    <a-col :span="18">
                      <a-slider v-model:value="model.params.maxTokens" :step="1" :min="0" :max="10000" />
                    </a-col>
                    <a-col :span="4">
                      <a-input-number v-model:value="model.params.maxTokens" :min="0" :max="10000" />
                    </a-col>
                  </a-row>
                </a-form-item>
              </a-form>
            </template>
            <icon-font iconClass="icon-opt-shezhi" color="#60666b" font-size="24px" />
          </a-popover>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>分类</span>
      </div>
      <div class="content">
        <div v-for="(item, index) in props.nodeData?.properties?.options.categories" class="case-item">
          <div class="case-header">
            <div class="case-label">
              <span>分类{{ index + 1 }}</span>
            </div>
            <div class="ant-space css-9m98ij ant-space-horizontal ant-space-align-center case-action" style="gap: 8px">
              <div class="ant-space-item">
                <DeleteOutlined />
              </div>
            </div>
          </div>
          <a-textarea
            v-model:value="item.category"
            @blur="categoryChange(item)"
            class="case-input"
            placeholder="请输入分类名称"
            style="width: 100%"
          />
        </div>
      </div>
    </div>
    <div class="item">
      <a-button type="primary" @click="addCategory" style="width: 100%">添加分类</a-button>
    </div>
    <div class="item">
      <div class="header">
        <span>ELSE</span>
      </div>
      <div class="content">
        <span class="ai-label">当以上分类都不满足时，执行此分支</span>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输出变量</span>
      </div>
      <div class="content">
        <div style="display: flex; flex-direction: column">
          <span class="ai-label">index&lt;number&gt; 分类索引</span>
          <span class="ai-label">content&lt;string&gt; 分类描述</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import { getPreNodes } from '../../../../utils/flowNodeUtils';
import { ModelApi } from '@/views/super/airag/aimodel/api/ModelApi';
const props = defineProps({
  nodeData: Object,
  lf: Object || String
});
const inputParams = computed(() => {
  props.nodeData.properties.inputParams.forEach(item => {
    if (item.nodeId) {
      item.id = item.nodeId + '_' + item.field;
    }
  });
  return props.nodeData.properties.inputParams;
});
const inputParamId = computed({
  get() {
    return props.nodeData.properties.inputParams && props.nodeData.properties.inputParams.length > 0
      ? props.nodeData.properties.inputParams[0].id
      : null;
  },
  set(val) {
    if (props.nodeData.properties.inputParams.length == 0) {
      props.nodeData.properties.inputParams.push({ id: '' });
    }
    props.nodeData.properties.inputParams[0].id = val;
    props.nodeData.properties.inputParams[0].field = val.split('_')[1];
    props.nodeData.properties.inputParams[0].nodeId = val.split('_')[0];
    setProperties();
  }
});
const model = ref(props.nodeData.properties?.options?.model);
const modelList = ref([]);
const prevNodes = ref([]);
const prevVariables = computed(() => {
  if (prevNodes.value.length === 0) return [];

  return prevNodes.value.flatMap(prevNode => {
    // 开始节点使用inputParams，其他节点使用outputParams
    const params = prevNode.type === 'start' ? prevNode.properties.inputParams : prevNode.properties.outputParams;

    var dd =
      Array.isArray(params) && params.length > 0
        ? params.map(param => ({
            nodeId: prevNode.id,
            nodeName: prevNode.properties.text,
            field: param.field,
            name: param.name,
            type: param.type,
            id: prevNode.id + '_' + param.field
          }))
        : [];
    console.log(dd);
    return dd;
  });
});

const getModelList = () => {
  let params = {
    pageNo: 0,
    pageSize: 1000,
    column: 'createTime',
    order: 'desc',
    modelType: 'LLM'
  };

  ModelApi.list(params).then(res => {
    if (res.success) {
      modelList.value = res.data.records;
    } else {
      modelList.value = [];
    }
  });
};
watch(
  () => props.nodeData,
  nodeDataChange => {
    var nodes = getPreNodes(props.nodeData, props.lf.graphModel);
    prevNodes.value = nodes;
    getModelList();
    console.log(nodes);
  },
  {
    immediate: true
  }
);
const setProperties = () => {
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
const categoryChange = item => {
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
const deleteCategory = index => {
  props.nodeData.properties.options.categories.splice(index, 1);
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
const addCategory = () => {
  props.nodeData.properties.options.categories.push({ category: '' });
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};

const handleModelChange = value => {
  debugger;
  var ml = modelList.value.find(item => item.id === value);
  if (ml) {
    // props.nodeData.properties.options.model.modeId = value;
    // props.nodeData.properties.options.model.params = model.params;
    model.value.params.model = ml.name;

    console.log(props.nodeData.properties);
    setProperties();
  }
};
</script>
<style  lang='less' scoped>
.item {
  padding-top: 4px;
  padding-bottom: 4px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .content {
    background-color: #fff;
  }
}

.case-item {
  margin-bottom: 8px;
  position: relative;
}

.case-item .case-header {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 11px;
  height: 30px;
  border-radius: 3px 0 0;
  background-color: #fff;
  z-index: 2;
  pointer-events: none;
  padding: 2px 11px;
  display: flex;
  justify-content: space-between;
}

.case-item .case-header .case-label {
  color: #999;
}

.case-item .case-header .case-action .app-iconify {
  cursor: pointer;
  pointer-events: auto;
}

.case-item .case-header .case-action .delete {
  transition: color 0.15s;
}

.case-item .case-header .case-action .delete:hover {
  color: #ff4d4f;
}

.case-item .case-input {
  padding-top: 32px;
}
.ai-label {
  color: rgb(170, 170, 170);
  font-size: 14px;
}
</style>